<!--配置页面-->
<template>
  <!--设置区域-->
  <div class="body-right" :class="[rightSidebarState ? 'body-right-unfold' : 'body-right-collapse']">
    <div class="arrow" @click="hideMenu">
      <el-icon class="icon"><DArrowLeft v-if="!rightSidebarState" /> <DArrowRight v-else /></el-icon>
    </div>
    <div class="right-content" @click="scrollModule" @keyup="scrollModule">
      <div class="content-title">配置</div>
      <!--基础配置-->
      <template v-if="menuButton === 'basicConfiguration'">
        <!--文本输入框-->
        <textInputBoxComponent title="模板名称" v-model:value="currentSettings.name"></textInputBoxComponent>
        <!--上传图片-->
        <imageComponent
          title="背景图片"
          v-model:fileNameValue="cssStyle.backgroundImageName"
          v-model:imageInfo="currentSettings.baseConfig.cssStyle"
        ></imageComponent>
        <!--内边距百分比-->
        <paddingComponent v-model:cssStyle="currentSettings.baseConfig.cssStyle"></paddingComponent>
      </template>
      <!--组配置-->
      <template v-if="menuButton === 'groupConfiguration'">
        <div class="content-groupConfiguration" v-for="(item, index) in currentSettings.groupConfig" :key="index">
          <el-form :rules="groupConfigurationRules" :model="item">
            <div class="groupConfiguration-delete">
              <!--删除按钮-->
              <el-popconfirm title="是否确认删除该组名称?" width="220" @confirm="groupDeletion(index)">
                <template #reference>
                  <img src="@/assets/images/deleteBtn.png" alt="删除" />
                </template>
              </el-popconfirm>
            </div>
            <el-form-item prop="groupName" label="组名称" class="groupConfiguration-name">
              <el-input
                v-model="item.groupName"
                clearable
                placeholder="请输入组名称"
                @focus="groupName = item.groupName"
                @blur="groupName = null"
                prop="groupName"
              />
            </el-form-item>
            <div class="name">提交规则</div>
            <el-form-item label="最少答" prop="groupName">
              <el-input
                v-model="item.submitRule.minimumNumberOfVotes"
                placeholder="请输入模板名称"
                clearable
                type="number"
                min="0"
                max="100"
                step="1"
                @focus="groupName = item.groupName"
                @blur="groupName = null"
              >
                <template #append>个</template>
              </el-input>
            </el-form-item>
            <el-form-item label="最多答" prop="groupName">
              <el-input
                v-model="item.submitRule.maximumNumberOfVotes"
                placeholder="请输入模板名称"
                clearable
                type="number"
                min="0"
                max="100"
                step="1"
                @focus="groupName = item.groupName"
                @blur="groupName = null"
              >
                <template #append>个</template>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="content-btn" @click="addGroup">
          <el-icon><CirclePlus /></el-icon>
          <span>新增组</span>
        </div>
      </template>
      <!--图片配置-->
      <template v-if="menuButton === 'image'">
        <!--内边距百分比-->
        <paddingComponent v-model:cssStyle="templateSettings.cssStyle"></paddingComponent>
        <!--上传图片-->
        <imageComponent
          title="图片"
          v-model:fileNameValue="templateSettings.cssStyle.backgroundImageName"
          v-model:imageInfo="templateSettings.cssStyle"
        ></imageComponent>
      </template>
      <!--简文本设置-->
      <template v-if="menuButton === 'text'">
        <!--文本位置-->
        <textPositionComponent></textPositionComponent>
        <!--内边距百分比-->
        <paddingComponent v-model:cssStyle="templateSettings.cssStyle"></paddingComponent>
        <!--背景颜色选择-->
        <colorSelectionComponent
          title="背景颜色"
          v-model:color="templateSettings.cssStyle.backgroundColor"
        ></colorSelectionComponent>
        <!--字体系列-->
        <dropDownOptionComponent
          title="字体系列"
          v-model:value="templateSettings.cssStyle.fontFamily"
          v-model:option-value="fontFamily"
        >
        </dropDownOptionComponent>
        <!--字体颜色选择-->
        <colorSelectionComponent title="字体颜色" v-model:color="templateSettings.cssStyle.fontColor"></colorSelectionComponent>
        <!--字体大小-->
        <textInputBoxComponent
          type="number"
          title="字体大小"
          v-model:value="templateSettings.cssStyle.fontSize"
        ></textInputBoxComponent>
        <!--字体粗细-->
        <dropDownOptionComponent
          title="字体系列"
          v-model:value="templateSettings.cssStyle.fontWeight"
          v-model:option-value="FONT_WIDTH"
        >
        </dropDownOptionComponent>
        <!--文本输入框-->
        <textInputBoxComponent
          title="标题内容"
          :rows="5"
          v-model:value="templateSettings.businessData.content"
        ></textInputBoxComponent>
      </template>
      <!--富文本设置-->
      <template v-if="menuButton === 'richText'">
        <!--内边距百分比-->
        <paddingComponent v-model:cssStyle="templateSettings.cssStyle"></paddingComponent>
        <!--背景颜色选择-->
        <colorSelectionComponent
          title="背景颜色"
          v-model:color="templateSettings.cssStyle.backgroundColor"
        ></colorSelectionComponent>
        <!--富文本内容-->
        <textInputBoxComponent
          title="文本内容"
          type="richText"
          v-model:cssId="templateSettings.cssStyle.i"
          v-model:value="templateSettings.businessData.content"
        ></textInputBoxComponent>
      </template>
      <!--最美移动人模块-->
      <template v-if="menuButton === BEAUTIFUL_MOBILE_NAME">
        <!--组名称-->
        <dropDownOptionComponent
          title="组名称"
          v-model:value="templateSettings.groupName"
          v-model:option-value="groupConfig"
        ></dropDownOptionComponent>
        <!--上传图片-->
        <imageComponent
          title="照片"
          v-model:fileNameValue="templateSettings.businessData.imageName"
          v-model:imageInfo="templateSettings.businessData"
        ></imageComponent>
        <!--人员信息-->
        <div class="content-personnelInformation">
          <el-form :rules="groupConfigurationRules" :model="businessData">
            <el-form-item label="人员信息">
              <el-button type="danger" @click="selector([])">人员选择</el-button>
            </el-form-item>
            <el-form-item label="员工OA：" prop="userId">
              <el-input
                v-model="businessData.userId"
                placeholder="请输入OA账号"
                clearable
                @input="userIdChange(templateSettings, businessData.userId)"
              />
            </el-form-item>
            <el-form-item label="员工姓名：" prop="userName">
              <el-input v-model="businessData.userName" placeholder="请输入姓名" clearable />
            </el-form-item>
            <el-form-item label="员工编号：" prop="userCode">
              <el-input v-model="businessData.userCode" placeholder="请输入员工编号" clearable />
            </el-form-item>
            <el-form-item label="部门名称：" prop="deptName">
              <el-input v-model="businessData.deptName" placeholder="请输入部门" clearable />
            </el-form-item>
            <el-form-item label="单位名称：" prop="companyName">
              <el-input v-model="businessData.companyName" placeholder="请输入单位" clearable />
            </el-form-item>
            <el-form-item label="弹框标题：" prop="popupTitle">
              <el-input v-model="businessData.popupTitle" placeholder="请输入标题" clearable :rows="4" type="textarea" />
            </el-form-item>
            <el-form-item label="弹框内容：" prop="popupContent">
              <quillEditor v-model:content="businessData.popupContent" v-model:cssId="templateSettings.cssStyle.i"></quillEditor>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <!--选择模块设置-->
      <template v-if="menuButton === 'choiceQuestion'">
        <!--组名称-->
        <dropDownOptionComponent
          title="组名称"
          v-model:value="templateSettings.groupName"
          v-model:option-value="groupConfig"
        ></dropDownOptionComponent>
        <!--主选项-->
        <votingOptionsComponent
          type="mainOptions"
          v-model:item="templateSettings.businessData"
          v-model:cssStyle="templateSettings.cssStyle"
        ></votingOptionsComponent>
      </template>
      <!--简答题设置-->
      <template v-if="menuButton === 'shortAnswerQuestion'">
        <!--组名称-->
        <dropDownOptionComponent
          title="组名称"
          v-model:value="templateSettings.groupName"
          v-model:option-value="groupConfig"
        ></dropDownOptionComponent>
        <!--主选项-->
        <votingOptionsComponent
          type="shortAnswerQuestion"
          v-model:item="templateSettings.businessData"
          v-model:cssStyle="templateSettings.cssStyle"
        ></votingOptionsComponent>
      </template>
      <!--参与率/得分率设置-->
      <template v-if="menuButton === 'participationRate' || menuButton === 'scoreObtained'">
        <!--内边距百分比-->
        <paddingComponent v-model:cssStyle="templateSettings.cssStyle"></paddingComponent>
        <!--背景颜色选择-->
        <colorSelectionComponent title="背景颜色" v-model:color="templateSettings.cssStyle.backgroundColor">
        </colorSelectionComponent>
        <!--字体系列-->
        <dropDownOptionComponent
          title="字体系列"
          v-model:value="templateSettings.cssStyle.fontFamily"
          v-model:option-value="FONT_FAMILY"
        >
        </dropDownOptionComponent>
        <!--字体颜色-->
        <colorSelectionComponent title="字体颜色" v-model:color="templateSettings.cssStyle.fontColor"></colorSelectionComponent>
        <!--字体大小-->
        <textInputBoxComponent
          type="number"
          title="字体大小"
          v-model:value="templateSettings.cssStyle.fontSize"
        ></textInputBoxComponent>
        <!--字体粗细-->
        <dropDownOptionComponent
          title="字体粗细"
          v-model:value="templateSettings.cssStyle.fontWeight"
          v-model:option-value="FONT_WIDTH"
        ></dropDownOptionComponent>
      </template>
    </div>
  </div>
  <!--人员选择弹窗-->
  <PersonnelSelection ref="personnelSelectionDialog" @submit="submit" :multipleChoices="false"></PersonnelSelection>
</template>

<script setup>
import { v4 } from "uuid";
import textInputBoxComponent from "@/components/FormComponents/textInputBoxComponent.vue"; //文本输入框组件
import textPositionComponent from "@/components/FormComponents/textPositionComponent.vue"; //文本位置组件
import paddingComponent from "@/components/FormComponents/paddingComponent.vue"; //内边距百分比组件
import imageComponent from "@/components/FormComponents/imageComponent.vue"; //上传图片组件
import PersonnelSelection from "@/components/flowDemo/PersonnelSelectionDialog.vue"; //人员选择弹窗组件
import colorSelectionComponent from "@/components/FormComponents/colorSelectionComponent.vue"; //颜色选择组件
import dropDownOptionComponent from "@/components/FormComponents/dropDownOptionComponent.vue"; //下拉选项组件
import votingOptionsComponent from "@/components/FormComponents/votingOptionsComponent.vue";
import quillEditor from "@/components/FormComponents/quillEditor.vue";
import { FONT_FAMILY, FONT_WIDTH, BEAUTIFUL_MOBILE_NAME } from "@/utils/mockConfiguration/mockConfig";
import { CirclePlus, DArrowLeft, DArrowRight } from "@element-plus/icons-vue";
import { ref } from "vue";
import { first } from "lodash";
import { useTemplateEditing } from "@/store/modules/templateEditing";
const templateEditing = useTemplateEditing();
const { currentSettings, templateSettings, groupConfig, groupName, menuButton, templatePageIndex } = storeToRefs(templateEditing);
const {
  baseConfig: { cssStyle },
} = currentSettings.value;
const { businessData } = templateSettings.value;
//响应式高度
const { updateDimensions } = templateEditing;
//右侧边栏状态
const rightSidebarState = ref(true);
//人员选择弹窗
const personnelSelectionDialog = ref(null);
//组配置校验规则
const groupConfigurationRules = reactive({
  userId: [{ required: true, message: "请输入OA账号", trigger: "blur" }],
  userName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  userCode: [{ required: true, message: "请输入员工编号", trigger: "blur" }],
  deptName: [{ required: true, message: "请输入部门", trigger: "blur" }],
  companyName: [{ required: true, message: "请输入单位", trigger: "blur" }],
  popupTitle: [{ required: true, message: "请输入标题", trigger: "blur" }],
  popupContent: [{ required: true, message: "请输入弹框内容", trigger: "blur" }],
});
/**
 * 隐藏右侧边栏
 */
const hideMenu = () => {
  rightSidebarState.value = !rightSidebarState.value;
  updateDimensions(v4());
};
/**
 * 滚动到当前模块
 */
const scrollModule = () => {
  requestAnimationFrame(() => {
    const moduleNodes = document.getElementById(templateSettings.value.id); // 当前模块节点
    moduleNodes?.scrollIntoView({ behavior: "smooth", block: "center" });
    updateDimensions(v4());
  });
};
//当前人员信息
const currentPersonnelInformation = ref({});
/**
 * 打开人员选择弹窗
 * @param {Array} value 人员待选数据
 */
const selector = value => {
  currentPersonnelInformation.value = templateSettings.value.businessData;
  personnelSelectionDialog.value.showDialog(value);
};
/**
 * 人员选择弹窗提交
 * @param {Array} value 人员数据
 */
const submit = value => {
  const { userId, userName, userCode, deptName, companyName } = first(value); //待选人员信息，拿到的是一个数组，这里只有一个人员信息
  Object.assign(currentPersonnelInformation.value, { userId, userName, userCode, deptName, companyName });
  Object.assign(templateSettings.value, { id: userId });
};
/**
 * 新增组配置
 */
const addGroup = () => {
  currentSettings.value.groupConfig.push({
    groupName: "",
    submitRule: {
      // 提交规则
      minimumNumberOfVotes: "", // 最少提交几个
      maximumNumberOfVotes: "", // 最多提交几个
    },
  });
};
/**
 * 删除组
 */
const groupDeletion = value => {
  currentSettings.value.groupConfig = currentSettings.value.groupConfig.filter((item, index) => value !== index);
};

/**
 * 人员添加id
 * @param data 人员信息
 * @param userId 用户id
 */
const userIdChange = (data, userId) => (data.id = userId);
</script>

<style scoped lang="less">
.body-right {
  height: 100%;
  background: #ffffff;
  box-shadow: 0 0 10px 0 #d2dded;
  position: relative;
  .right-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    white-space: nowrap;
    padding: 20px;
    &::-webkit-scrollbar {
      width: 5px;
    }
    &::-webkit-scrollbar-thumb {
      background: @buttonColor;
    }
    &::-webkit-scrollbar-track {
      background: transparent;
    }
    &::-webkit-scrollbar-track-piece {
      background: transparent;
    }
    //组配置和投票个人信息
    .content-groupConfiguration,
    .content-personnelInformation {
      display: flex;
      flex-direction: column;
      row-gap: 20px;
      :deep(.el-form-item) {
        //置输入框标题
        .el-form-item__label {
          font-size: 15px;
          color: #351d1d;
          font-weight: 400;
        }
        .el-input {
          width: 100%;
          height: @InputHeight;
          input {
            font-size: 18px;
          }
        }
      }
      :deep(.groupConfiguration-name) {
        .el-form-item__label {
          font-size: 18px;
        }
      }
      //删除按钮
      .groupConfiguration-delete {
        display: flex;
        justify-content: end;
        margin-bottom: 14px;
        img {
          width: 20px;
          height: 20px;
          cursor: pointer;
        }
      }
      //公共标题
      .name {
        font-size: 18px;
        color: #351d1d;
        font-weight: 400;
        margin-bottom: 14px;
      }
    }
    //新增按钮
    .content-btn {
      width: 80%;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      column-gap: 8px;
      background: #f5f7f9;
      border-radius: 6px;
      cursor: pointer;
      font-size: 16px;
      margin: 0 auto;
      img {
        width: 10px;
      }
    }
    //配置标题
    .content-title {
      font-size: 20px;
      color: @buttonColor;
      font-weight: 700;
      text-align: center;
      margin-bottom: 20px;
    }
  }
}
//右箭头样式
.body-right-collapse {
  width: 0;
  transition: 0.2s ease;
  .right-content {
    display: none;
  }
}
.body-right-unfold {
  width: 25%;
  transition: 0.2s ease;
  .right-content {
    display: block;
  }
}
</style>
